<template>
  <div class="product-container">
    <div class="products">
      <!-- <div class="product-item" v-for="(product, idx) in productArr" :key="idx"> -->
      <div class="product-item" v-for="(product, idx) in productArr" :key="idx">
        <div class="product-left">
          <div class="strip"></div>
          <div class="title">
            <div class="title-number">{{product.number}}</div>
            <div class="title-name">{{product.name}}</div>
          </div>
          <div class="strip"></div>
        </div>
        <div class="product-right">
          <div class="product-info">
            <div class="info-couple">
              <span class="info-label">生产状态：</span>
              <span v-if="product.status === 0" style="color: #5e5b5b">未开启</span>
              <span v-if="product.status === 1" style="color: #6BCB4F">已开启</span>
              <span v-if="product.status === 2" style="color: #F04818">已停止</span>
              <span v-if="product.status === 3" style="color: #FAD110">已完成</span>
            </div>
            <div class="info-couple">
              <span class="info-label">工序队列：</span>
              <span class="info-queue-value">{{ product.queue }}</span>
            </div>
            <div class="info-couple">
              <span class="info-label">日完成订单：</span>
              <span class="info-orders-value">{{ product.orders }}</span>
            </div>
          </div>
          <!-- <div class="product-progress">
            <Progress :percent="45" :stroke-width="20" status="active" text-inside />
          </div> -->
          <Progress :percent="product.progress" :stroke-width="5" status="active" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Tcmd } from './command'
import { Component, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component  
export default class Product extends Vue {

  private timer: any = null;

  private isRunning: boolean = false

  private productArr: any = [
    // {
    //   // 序号 string
    //   number: '1#',
    //   // 名称 string
    //   name: '荧光清洗、铬酸阳极化生产线',
    //   // 生产状态 number
    //   status: 0, // 0:未开启 1:已开启 2:已停止 3:已完成
    //   // 工序队列 string
    //   queue: '#010021',
    //   // 日完成订单 number
    //   orders: 870,
    //   // 进度条 number
    //   progress: 50
    // },
    // {
    //   number: '2#',
    //   name: '硼硫酸阳极化生产线',
    //   status: 1, // 0:未开启 1:已开启 2:已停止 3:已完成
    //   queue: '#010021',
    //   orders: 870,
    //   progress: 50
    // },
    // {
    //   number: '3#',
    //   name: '钛合金钝化、钛合金薄膜硫酸阳极化',
    //   status: 2, // 0:未开启 1:已开启 2:已停止 3:已完成
    //   queue: '#010021',
    //   orders: 870,
    //   progress: 50
    // },
    // {
    //   number: '4#',
    //   name: '硫酸、硬质阳极化、阿洛丁生产线',
    //   status: 3, // 0:未开启 1:已开启 2:已停止 3:已完成
    //   queue: '#010021',
    //   orders: 870,
    //   progress: 50
    // }
  ];
  mounted() {
    this.getProductInfo();
    this.startTimer(60000);
  }

  private startTimer(time: number = 3000) {
    if (!this.isRunning) {
      this.isRunning = true
      this.timer = setInterval(() => {
        this.getProductInfo();
      }, time)
    }
  }

  private pauseTimer() {
    if (this.isRunning && !Tsrv.noValue(this.timer)) {
      clearInterval(this.timer)
      this.isRunning = false
    }
  }

  /**
   * 获取生产产线 信息
   */
  private getProductInfo(): Promise<boolean> {
    return new Promise((resolve, reject)=> {
      const param = {
        type: 'svcLogic',
        cmd: 'sw_fwork_info',
        userInfo: {},
        funInfo: {},
        data: {}
      }

      Tcmd.doEvent(param).then(res=> {
        const [b, resp, data, msg] = res;
        if (b) {
          // console.log('典规信息', data);
          const d = data?.productInfo;
          this.productArr = d;
          resolve(true);
        } else {
          this.$Message.error(msg);
          resolve(false);
        }
      }).catch(err=> {
        this.$Message.error(`未找到产线，请确保当前产线存在——${err}`);
      });
    })
  }


  beforeDestroy() {
    this.pauseTimer();
  }
}
</script>

<style lang="scss" scoped>
.product-container {
  width: 100%;
  // width: 30%;
  height: 100%;
  .products {
    width: 100%;
    height: 100%;
    padding: 5px;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-around;
    // align-items: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    // row-gap: 10px;
    .product-item + .product-item {
      margin-top: 10px;
    }
    .product-item {
      width: 100%;
      display: grid;
      grid-template-columns: 2fr 3fr;
      grid-template-rows: 1fr;
      
      .product-left {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        // background: rgba(15,170,255,0.28);
        position: relative;
        overflow: hidden;
        opacity: 0.91;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: radial-gradient(
            circle at center,
            rgba(15,170,255,0) 0%,
            rgba(15,170,255,0.28) 100%
          );
          z-index: -1;
        }
        
        .strip {
          width: 8px;
          background: #00C2FF;
        }
        .title {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 0 5px;
          .title-number {
            width: 100%;
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: 18px;
            color: #0AEAF5;
            line-height: 21px;
            text-shadow: 0px 2px 4px #053076;
            text-align: left;
            font-style: normal;
          }
          .title-name {
            width: 100%;
            font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
            font-weight: normal;
            font-size: 15px;
            color: #FFFFFF;
            line-height: 22px;
            text-shadow: 0px 2px 4px #014999;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .product-right {
        height: 100%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .product-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: start;
          padding-left: 10px;

          .info-label {
            font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
            font-weight: normal;
            font-size: 15px;
            color: #C6CACA;
            line-height: 16px;
            text-align: left;
            font-style: normal;
          }

          .info-couple {
            .info-queue-value {
              font-family: D-DINExp, D-DINExp;
              font-weight: bold;
              font-size: 15px;
              color: #FFFFFF;
              line-height: 16px;
              text-align: right;
              font-style: normal;
            }
            .info-orders-value {
              font-family: D-DINExp, D-DINExp;
              font-weight: bold;
              font-size: 15px;
              color: #FAD110;
              line-height: 16px;
              text-align: right;
              font-style: normal;
            }
          }
        }

        // .product-progress {
        //   height: 8px;
        // }
      }
    }
  }
}
</style>